<template>
  <div class="add-goods">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
      </el-col>
    </el-row>
   <el-steps :active="active" finish-status="success">
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
    <el-step title="步骤 4"></el-step>
    </el-steps>
    <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left">
        <el-tab-pane label="基本信息" name="first">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="商品名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="商品数量">
                    <el-input v-model="form.num"></el-input>
                </el-form-item>
                <el-form-item label="商品重量">
                    <el-input v-model="form.weight"></el-input>
                </el-form-item>
                <el-form-item label="商品分类">
                    <el-select v-model="form.region" placeholder="请选择分类">
                    <el-option label="家具" value="shanghai"></el-option>
                    <el-option label="日常生活" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否促销">
                     <el-radio v-model="radio" label="1" border>事</el-radio>
                     <el-radio v-model="radio" label="2" border>否</el-radio>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="second">商品参数</el-tab-pane>
        <el-tab-pane label="商品属性" name="third">商品属性</el-tab-pane>
        <el-tab-pane label="商品图片" name="fourth">
            <el-upload
                class="upload-demo"
                action="http://localhost:8888/api/private/v1/upload"
                :on-preview="handlePreview"
                :headers="getHeader()"
                :on-success = "getSuccess"
                :on-remove="handleRemove"
                :file-list="fileList2"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="fifth">商品内容</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active:0,
      activeName:'first',
       fileList2:[],
      form:{
          name:'',
          price:'',
          num:'',
          weight:'',
          region:''
      },
      radio:''
    }
  },
   methods: {
      handleClick(tab, event) {
        console.log(tab,1111, event);
        this.active = tab.index;
        if (this.active++ > 4) this.active = 0;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      getHeader(){
        let token = localStorage.getItem('mytoken')
        return{Authorization:token}
      },
      getSuccess(response, file, fileList){
       console.log(response)
       if(response.meta.status === 200){
           this.$message({
               type:'success',
               message:response.meta.msg
           })
       }else{
        this.$message({
               type:'error',
               message:response.meta.msg
           })   
       }
      }
    },
    
};
</script>
<style lang="scss" scoped>
</style>
